import React, { useState } from 'react';
import { Button, Space } from 'antd';
import { PlusOutlined, ReloadOutlined, SettingOutlined } from '@ant-design/icons';
import ColumnSettingModal from './ColumnSettingModal';

interface StudentToolbarProps {
  onAdd: () => void;
  onRefresh: () => void;
  columns?: any[];
  onColumnsChange?: (columns: any[]) => void;
}

const StudentToolbar: React.FC<StudentToolbarProps> = ({ 
  onAdd, 
  onRefresh,
  columns = [],
  onColumnsChange 
}) => {
  const [columnSettingVisible, setColumnSettingVisible] = useState(false);

  const handleColumnSettingOk = (newColumns: any[]) => {
    setColumnSettingVisible(false);
    if (onColumnsChange) {
      onColumnsChange(newColumns);
    }
  };

  return (
    <>
      <Space style={{ width: '100%', justifyContent: 'space-between' }}>
        <Button type="primary" icon={<PlusOutlined />} onClick={onAdd}>
          添加学生
        </Button>
        <Space>
          <Button icon={<ReloadOutlined />} onClick={onRefresh}>
            刷新
          </Button>
          <Button 
            icon={<SettingOutlined />} 
            onClick={() => setColumnSettingVisible(true)}
          >
            列设置
          </Button>
        </Space>
      </Space>

      {columns.length > 0 && (
        <ColumnSettingModal
          open={columnSettingVisible}
          onCancel={() => setColumnSettingVisible(false)}
          onOk={handleColumnSettingOk}
          columns={columns}
        />
      )}
    </>
  );
};

export default StudentToolbar;